<template>
  <a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">新增</a-button>
  <a-table :dataSource="dataSource" :columns="columns">
    <template #operate="{ record }">
      <a-popconfirm
        v-if="dataSource.length"
        title="Sure to delete?"
        @confirm="onDelete(record.key)"
      >
        <a>删除</a>
      </a-popconfirm>
    </template>
  </a-table>
  <a-modal v-model:visible="visible" title="新增" @ok="handleOk">
      <a-form :model="formData" :rules="rules" ref="formRef">
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formData.name" />
        </a-form-item>
        <a-form-item label="年龄" name="age">
          <a-input v-model:value="formData.age" />
        </a-form-item>
        <a-form-item label="住址" name="address">
          <a-textarea  v-model:value="formData.address" />
        </a-form-item>
      </a-form>
  </a-modal>
  <!-- <Introduce
  :limit="10">
  </Introduce> -->
  <!-- emits自定义事件 -->
  <Emits @click="onClick"></Emits>
</template>

<script lang="ts">
import Introduce from './Introduce.vue'
import Emits from './EmitsTest.vue'
import { computed, ref, defineComponent, Ref, reactive, UnwrapRef } from 'vue'
interface DataItem {
  key: string;
  name: string;
  age: number;
  address: string;
}
// 表单类型
interface FormState {
  key: string;
  name: string;
  age: number;
  address: string;
}
export default defineComponent({
  name: 'Practice',
  components: { Introduce, Emits },
  setup () {
    const formRef = ref()
    const visible = ref<Boolean>(false)
    const formData:UnwrapRef<FormState> = reactive({
      key: '',
      name: '',
      age: null,
      address: ''
    })
    const dataSource:Ref<DataItem[]> = ref(
      [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '3',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        }
      ])
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        key: 'operate',
        slots: { customRender: 'operate' }
      }
    ]
    const count = computed(() => dataSource.value.length + 1);
    // 新增
    const handleAdd = () => {
      visible.value = true;
    }
    // 确定
    const handleOk = () => {
      formRef.value.validate().then(() => {
        dataSource.value.push(formData);
        visible.value = false;
      })
    }
    // 删除
    const onDelete = (key: String) => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    }
    // 校验规则
    const rules = {
      name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
      age: [{required: true, message: '请输入年龄', trigger: 'blur'}],
      address: [{required: true, message: '请输入地址', trigger: 'blur'}]
    }
    const onClick = () => {
      console.log('触发了emits')
    }
    return {
      formRef,
      dataSource,
      columns,
      onDelete,
      count,
      handleAdd,
      visible,
      formData,
      handleOk,
      rules,
      onClick
    }
  }
})
</script>

<style>

</style>